<template>
    <div class="news_box">
        <ul class="uu">
            <li v-for="item in newsList" :key="item.id">
                <img :src="item.pic" alt />
                <p v-html="item.title"></p>
                <p class="descript">{{item.descript}}</p>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            newsList: [],
        };
    },
    methods: {},
    mounted() {
        this.$API.getNewsList().then((res) => {
            // console.log(res.data.data);
            this.newsList = res.data.data;
        });
    },
};
</script>

<style lang="scss">
.news_box {
    width: 100%;
    height: 36vh;
    overflow: auto;
    .uu {
        width: 500%;
        height: 36vh;
        display: flex;
        align-items: center;
        justify-content: space-around;
        li {
            width: 98vw;
            height: 100%;
            margin: 0 1vw;
            img {
                width: 100%;
                height: 68%;
            }
            .descript {
                padding: 2vh 0 0vh 0;
                width: 100%;
                height: 5vh;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
        }
    }
}
</style>